<template>
  <div>
    <el-form :model="vip" :rules="rules" ref="vipForm">
      <el-descriptions title="用户信息" :column="2" border>
        <el-descriptions-item label="手机号">{{vip.loginInfo.phone}}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-upload class="avatar-upload" :action="uploadUrl" :show-file-list="false" :on-success="onSuccess" :before-upload="beforeUpload">
            <img :src="baseImageUrl+vip.avatar" alt="" class="avatar">
          </el-upload>
        </el-descriptions-item>
        <el-descriptions-item label="昵称">
          <el-form-item prop="name">
            <el-input v-model="vip.name" placeholder="请输入昵称"/>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          <el-form-item>
            <el-select style="width: 100%" v-model="vip.sex" placeholder="请选择性别">
              <el-option label="男" :value="1"/>
              <el-option label="女" :value="2"/>
              <el-option label="未知" :value="3"/>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="生日">
          <el-form-item>
            <el-date-picker style="width: 100%" v-model="vip.birthday" type="date" placeholder="请选择日期"/>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="个人简介">
          <el-form-item>
            <el-input type="textarea" :rows="3" maxlength="200" show-word-limit v-model="vip.profile" placeholder="请输入简介"/>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <el-form-item style="margin-top: 15px;display: flex;justify-content: right">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data () {
    return {
      vip: {},
      uploadUrl: process.env.VUE_APP_BASE_URL + 'api/upload',
      baseImageUrl: process.env.VUE_APP_BASE_URL + '/img/',
      showImage: false,
      showImageSrc: '',
      rules: {
        name: [{
          required: true,
          message: '请输入您的名字',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    onSuccess (res) {
      if (res.code === 200) {
        this.vip.avatar = res.data
        this.submit()
      } else {
        this.$message.error(res.msg)
      }
    },
    beforeUpload (file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      if (!isImage) {
        this.$message.error('请选择正确的格式！')
      }
      const isLt20M = file.size / 1024 / 1024 < 20
      if (!isLt20M) {
        this.$message.error('文件大小不能超过20M！')
      }

      return isImage && isLt20M
    },
    submit () {
      this.$refs.vipForm.validate(valid => {
        if (valid) {
          this.$http.post('api/vip/update', this.vip).then(() => {
            this.$message.success('更新成功')
            this.getVip()
          })
        }
      })
    },
    getVip () {
      this.$http.get(`api/vip/info/${this.vip.vipId}`).then(({ data }) => {
        this.vip = { ...data }
      })
    }
  },
  created () {
    this.vip = JSON.parse(sessionStorage.getItem('vipInfo'))
    this.getVip()
  }
}
</script>

<style scoped>
.el-form-item{
  margin-bottom: 0;
}
.avatar-upload .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-upload .el-upload:hover{
  background-color: #409EFF;
}
.avatar{
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 50%;
}
</style>
